<template>
	<div class="layout-padding">
		<HyTable
			:searchFields="searchFields"
			:tableConfig="tableConfig"
			:searchConfig="searchConfig"
			:tableColumns="tableColumns"
			ref="hyTableRef"
			:searchButtonConfig="{
				span: 4,
				offset: 1,
			}"
			:searchDefault="searchDefault"
			:searchData="searchData"
			:tabls="tabls"
			@handleClick="handleClick"
		>
			<template #statusSlot="{ row }">
				<el-tag :class="setColor(row.status)">{{ chengStatu(row.status) }}</el-tag>
			</template>
			<template #operation>
				<el-table-column fixed="right" label="操作" width="130">
					<template #default="{ row }">
						<div style="display: flex; justify-content: space-around; align-items: center">
							<el-button text type="primary" style="margin-top: -5px" @click="showDetails(row)">查看</el-button>
						</div>
					</template>
				</el-table-column>
			</template>
		</HyTable>
	</div>
</template>

<script lang="ts" setup>
import dictionary from '../detail/components/dictionary.js';
import { useDict } from '/@/hooks/dict';
const { implement_procss_type } = useDict('implement_procss_type');
import { ArrowDown } from '@element-plus/icons-vue';
import { sheVerify } from '/@/api/Implementation/addImple';
import { computed, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import HyTable from '/@/components/HyTable/components/TableLayout/tabLayout.vue';
const router = useRouter();
const hyTableRef = ref();
const tabs = ref('tabs');
const tabls = computed(() => {
	return {
		type: 'card',
		tablesList: [
			{
				lable: '开发项目',
				name: 1,
			},
			{
				lable: '运维项目',
				name: 2,
			},
		],
	};
});
const tabNum = ref(1); //默认请求tab值
const searchDefault = ref({
	type: 1,
});
const searchData = ref({
	type: tabNum.value,
});
//接收tab值调用接口
const handleClick = (tab: any) => {
	tabNum.value = tab;
	searchDefault.value.type = tab;
	hyTableRef.value.handleRest();
};
const getTableData = () => {
	hyTableRef.value.getTableData();
};

const tableColumns = computed(() => {
	if (tabNum.value == 1) {
		return [
			{ prop: 'appCode', label: '数字化应用编号', width: 260 },
			{ prop: 'appName', label: '数字化应用名称', width: 260 },
			{ prop: 'domain', label: '所属领域', width: 150 },
			{ prop: 'responsibleDept', label: '责任部门', width: 260 },
			{ prop: 'declareTime', label: '申报时间' },
			{ prop: 'status', label: '状态', slot: 'statusSlot', width: 160, fixed: 'right' },
		];
	}
	if (tabNum.value == 2) {
		return [
			{ prop: 'appCode', label: '数字化应用编号', width: 260 },
			{ prop: 'appName', label: '数字化应用名称', width: 260 },
			{ prop: 'domain', label: '所属领域', width: 150 },
			{ prop: 'responsibleDept', label: '责任部门', width: 260 },
			{ prop: 'leadDept', label: '牵头部门', width: 260 },
			{ prop: 'declareTime', label: '申报时间' },
			{ prop: 'status', label: '状态', slot: 'statusSlot', width: 160, fixed: 'right' },
		];
	}
});
const searchConfig = ref({
	labelWidth: '100px',
	span: 5,
	offset: 0,
	type: 'search',
	title: '数字化应用实施申报审核',
	show: true,
});

const tableConfig = computed(() => {
	return {
		request: sheVerify,
	};
});
const chengStatu = (statu: any) => {
	if (!statu) {
		return;
	}
	let rea = '';
	implement_procss_type.value.forEach((item: any) => {
		if (item.value == statu) {
			rea = item.label;
		}
	});
	return rea;
};
//设置颜色
const setColor = (type: string) => {
	switch (type) {
		case '1':
			return 'wait-tag';
		case '2':
			return 'agree-tag';
		case '3':
			return 'refuse-tag';
		default:
			break;
	}
};
// 配置搜索
const searchFields = computed(() => {
	return {
		name: {
			type: 'input',
			label: '关键字',
			span: 4,
		},
		status: {
			type: 'select',
			label: '状态',
			span: 4,
			options: implement_procss_type.value,
		},
		timeArr: {
			type: 'date',
			span: 6,
			picker: 'datetimerange',
			label: '申报时间',
		},
	};
});

//详情
const detail = ref('实施方案审核');
const showDetails = (row: any) => {
	router.push({
		path: '/digitalImplement/detail/revDetail',
		query: {
			id: row.id,
			title: detail.value,
			status: row.status,
			processInstanceId: row.processInstanceId,
			nodeId: row.nodeId,
			taskId: row.taskId,
			pageTap: 'impDecs',
		},
	});
};
</script>
<style scoped lang="scss">
.layout-padding {
	overflow: auto;
	:deep(.el-tabs--border-card > .el-tabs__content) {
		padding: 0px;
	}
}

.moreBot {
	:deep(.block-col-2 .demonstration) {
		display: block;
		color: var(--el-text-color-secondary);
		font-size: 14px;
		margin-bottom: 20px;
	}

	:deep(.block-col-2 .el-dropdown-link) {
		display: flex;
		align-items: center;
	}
}
</style>
